.mybadge-0{
    height: 20px;
    width: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.mybadge-name-0{
    width: 50px;
    display: flex; 
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #bfbfbf;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.mybadge-lv-0{
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #bfbfbf;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #bfbfbf;

}
/* lv1 */
.mybadge-1 {
    height: 20px;
    width: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mybadge-name-1 {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #00A1D6;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.mybadge-lv-1 {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #00A1D6;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #00A1D6;
}
/* lv2 */
.mybadge-2 {
    height: 20px;
    width: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mybadge-name-2 {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #13c2c2;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.mybadge-lv-2 {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #13c2c2;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #13c2c2;
}
/* lv3 */
.mybadge-3 {
    height: 20px;
    width: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mybadge-name-3 {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #95de64;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.mybadge-lv-3 {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #95de64;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #95de64;
}
/* lv4 */
.mybadge-4 {
    height: 20px;
    width: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mybadge-name-4 {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #FB7299;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.mybadge-lv-4 {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #FB7299;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #FB7299;
}
/* lv5 */
.mybadge-5 {
    height: 20px;
    width: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mybadge-name-5 {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #faad14;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.mybadge-lv-5 {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #faad14;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #faad14;
}
/* lv6 */
.mybadge-6 {
    height: 20px;
    width: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mybadge-name-6 {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #fa541c;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.mybadge-lv-6 {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fa541c;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #fa541c;
}
/* lv7 */
.mybadge-7 {
    height: 20px;
    width: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mybadge-name-7 {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #ff4d4f;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.mybadge-lv-7 {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ff4d4f;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #ff4d4f;
}
/* lv8 */
.mybadge-8 {
    height: 20px;
    width: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mybadge-name-8 {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #9254de;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.mybadge-lv-8 {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #9254de;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #9254de;
}
/*  */
.mybadge-9 {
    height: 20px;
    width: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mybadge-name-9 {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #f759ab;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.mybadge-lv-9 {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #f759ab;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #f759ab;
}
.mybadge-10 {
    height: 20px;
    width: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mybadge-name-10 {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #030850;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.mybadge-lv-10 {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #030850;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #030850;
}